<template>
  <div
    class="dst-container"
    :style="cstyle"
  >
    <!--    <div-->
    <!--      class="demo-el-tabs"-->
    <!--      v-if="isTabs"-->
    <!--    >-->
    <!--      <el-tabs-->
    <!--        v-model="activeName"-->
    <!--        @tab-click="handleClick"-->
    <!--      >-->
    <!--        <el-tab-pane-->
    <!--          v-for="(tabs,index) in tabsList"-->
    <!--          :key="index"-->
    <!--          :label="tabs.label"-->
    <!--          :name="tabs.name"-->
    <!--        >-->
    <!--        </el-tab-pane>-->
    <!--      </el-tabs>-->
    <!--    </div>-->
    <el-form
      :inline="true"
      v-if="forms.length > 0"
      class="demo-form-inline"
    >
      <template v-for="(item, index) in forms">
        <!--input-->
        <el-form-item
          :key="index"
          :label="item.label"
          v-if="item.type === 'input'"
        >
          <el-input
            v-model="item.model"
            :placeholder="item.placeholder"
            clearable
          ></el-input>
        </el-form-item>
        <!--select-->
        <el-form-item
          :key="index"
          :label="item.label"
          v-if="item.type === 'select'"
        >
          <el-select
            v-model="item.model"
            :placeholder="item.placeholder"
            clearable
            @change="typeof item.handleChange ==='function'?item.handleChange($event):()=>{}"
          >
            <el-option
              v-for="it in item.data"
              :key="it.value"
              :label="it.label"
              :value="it.value"
            />
          </el-select>
        </el-form-item>
        <!--intervalAmount-->
        <el-form-item
          :key="index"
          :label="item.label"
          v-if="item.type === 'intervalAmount'"
        >
          <IntervalAmount
            :minVal.sync="item.minVal"
            :maxVal.sync="item.maxVal"
          ></IntervalAmount>
        </el-form-item>
        <!--numberIntervals-->
        <el-form-item
          :key="index"
          :label="item.label"
          v-if="item.type === 'numberIntervals'"
        >
          <NumberIntervals
            :minVal.sync="item.minVal"
            :maxVal.sync="item.maxVal"
          ></NumberIntervals>
        </el-form-item>
        <!--datePicker-->
        <el-form-item
          :key="index"
          :label="item.label"
          v-if="item.type === 'datePicker'"
        >
          <el-date-picker
            v-model="item.model"
            type="daterange"
            clearable
            range-separator="至"
            :start-placeholder="item.startPlaceholder || '开始日期'"
            :end-placeholder="item.endPlaceholder || '结束日期'"
            :picker-options="item.pickerOptions"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <!--timePicker-->
        <el-form-item
          :key="index"
          :label="item.label"
          v-if="item.type === 'timePicker'"
        >
          <el-time-picker
            is-range
            v-model="item.model"
            arrow-control
            range-separator="至"
            :start-placeholder="item.startPlaceholder || '开始时间'"
            :end-placeholder="item.endPlaceholder || '结束时间'"
            value-format="hh:mm:ss"
          />
        </el-form-item>
        <!--datetimerange-->
        <el-form-item
          :key="index"
          :label="item.label"
          v-if="item.type === 'datetimerange'"
        >
          <el-date-picker
            v-model="item.model"
            type="datetimerange"
            range-separator="至"
            clearable
            :start-placeholder="item.startPlaceholder || '开始时间'"
            :end-placeholder="item.endPlaceholder || '结束时间'"
            value-format="yyyy-MM-dd hh:mm:ss"
          />
        </el-form-item>
        <!--cascader-->
        <el-form-item
          :key="index"
          :label="item.label"
          v-if="item.type === 'cascader'"
        >
          <el-cascader
            v-if="item.state === 'last'"
            :options="item.data"
            :show-all-levels="false"
            v-model="item.model"
            clearable
          ></el-cascader>
          <el-cascader
            v-if="item.state === 'radio'"
            :props="{ checkStrictly: true }"
            :options="item.data"
            :show-all-levels="false"
            v-model="item.model"
            clearable
          ></el-cascader>
          <el-cascader
            v-if="item.state === 'multiple'"
            :props="{ multiple: true }"
            :options="item.data"
            collapse-tags
            v-model="item.model"
            clearable
          ></el-cascader>
        </el-form-item>
        <!--slot-->
        <el-form-item
          :key="index"
          :label="item.label"
          v-if="item.type === 'slot'"
        >
          <slot
            :name="item.slotName"
            :scoped="item"
          ></slot>
        </el-form-item>
        <!--checkbox-->
        <el-row
          :key="index"
          v-if="item.type === 'checkbox'"
        >
          <el-form-item :label="item.label">
            <el-checkbox
              v-if="item.isAll"
              v-model="item.checkAll"
              :indeterminate="item.isIndeterminate"
              @change="(val) => handleCheckAllChange(val, item)"
            >全选</el-checkbox>
            <el-checkbox-group
              v-model="item.value"
              @change="(val) => changeCheckbox(val, item)"
            >
              <el-checkbox
                :label="it.value"
                v-for="it in item.data"
                :key="it.value"
              >{{ it.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
        <!--radio-->
        <el-row
          :key="index"
          v-if="item.type === 'radio'"
        >
          <el-form-item :label="item.label">
            <el-radio-group v-model="formInline[item.prop]">
              <el-radio
                :label="it.value"
                v-for="it in item.data"
                :key="it.value"
              >{{ it.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <!--slotRow-->
        <el-row
          :key="index"
          v-if="item.type === 'slotRow'"
        >
          <el-form-item :label="item.label">
            <slot :name="item.slotName"></slot>
          </el-form-item>
        </el-row>
      </template>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          :loading="btnLoading"
          @click="handlerSearch"
        >查询</el-button>
        <el-button
          v-if="isReset"
          icon="el-icon-delete"
          @click="clearForm"
        >重置</el-button>
        <el-button
          :type="sb.type"
          v-for="(sb,index) in searchBtns"
          :key="index"
          :icon="sb.icon"
          @click="sb.click(formInline)"
        >{{sb.label}}</el-button>
      </el-form-item>
    </el-form>
    <div class="dst-table">
      <!--按钮区域-->
      <div
        class="btns-qj"
        v-if="btnArea"
      >
        <div>
          <template v-if="isAdd">
            <el-button
              type="primary"
              @click="openDrawer('add')"
              v-show="profile.addAuthority"
            >
              新增
            </el-button>
          </template>
          <template v-if="isUpload">
            <el-upload
              v-show="profile.isUploadAuthority"
              class="upload-demo"
              :action="uploadUrl"
              :show-file-list="false"
              accept=".xls,.xlsx"
              :headers="headers"
              :before-upload="beforeUpload"
              :on-success="handleSuccess"
              :limit="1"
            >
              <el-button
                type="primary"
                :plain="isBtnPlain ? isBtnPlain : false"
                class="upload-btn"
              >导入</el-button>
            </el-upload>
          </template>
          <template v-if="isDownload">
            <download-excel
              class="btn btn-default downloadBtn"
              :fields="json_fields"
              type="xls"
              :fetch="fetchData"
              v-show="profile.isDownloadAuthority"
              :name="fileName"
            >
              <el-button
                type="primary"
                :plain="isBtnPlain ? isBtnPlain : false"
                :disabled="multipleSelection.length > 0 ? false : true"
              >
                导出
              </el-button>
            </download-excel>
          </template>
          <el-button
            v-for="(btn, index) in btnLefts"
            :key="index"
            :type="btn.type"
            :plain="btn.plain ? btn.plain : false"
            :icon="btn.icon"
            @click="btn.click"
          >{{ btn.label }}</el-button>
        </div>
        <div>
          <el-button
            v-for="(btn, index) in btnRights"
            :key="index"
            :type="btn.type"
            :icon="btn.icon"
            @click="btn.click"
            :plain="btn.plain?btn.plain:false"
          >{{ btn.label }}</el-button>
        </div>
      </div>
      <!--表格的内容-->
      <el-table
        ref="multipleTable"
        v-loading="tableLoading"
        :data="tableData"
        :row-key="getRowKey"
        style="width: 100%;margin-top: 10px;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="multipleVisible"
          type="selection"
          :selectable="selectable"
          width="55"
        >
        </el-table-column>
        <el-table-column
          v-if="tableIndex"
          type="index"
          width="50"
          label="序号"
          fixed="left"
        >
        </el-table-column>
        <template v-for="(item, index) in tableConfig">
          <!--表格默认-->
          <el-table-column
            v-if="!item.type || item.type === 'default'"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            :width="item.price ? (item.width ? item.width :'86px') : ''"
            :show-overflow-tooltip="item.textOverflow === 'undefined' ? true : item.price ? true : item.textOverflow"
            :header-align="item.headerAlign ? item.headerAlign : 'left'"
            :align="item.align ? item.align : 'left'"
            :fixed="item.fixed ? item.fixed : false"
          >
            <template
              slot="header"
              slot-scope="{ column, $index }"
            >
              <span>{{item.label}}</span>
              <upDownSort v-if="item.sort"></upDownSort>
            </template>
            <template slot-scope="scoped">
              <div v-if="item.price">
                <div
                  v-if="item.format"
                  class="priveType"
                >
                  {{toDecimal2(item.format(scoped.row[item.prop], scoped.row))}}
                </div>
                <div
                  v-else
                  class="priveType"
                >{{ toDecimal2(scoped.row[item.prop]) }}</div>
              </div>
              <div v-else>
                <span v-if="item.format">{{item.format(scoped.row[item.prop], scoped.row)}}</span>
                <span v-else>{{ scoped.row[item.prop] || "-" }}</span>
              </div>
            </template>
          </el-table-column>
          <!--表格自定义-->
          <el-table-column
            v-if="item.type === 'slot'"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            :show-overflow-tooltip="item.textOverflow === 'undefined' ? true : item.textOverflow"
            :header-align="item.headerAlign ? item.headerAlign : 'left'"
            :align="item.align ? item.align : 'left'"
          >
            <template slot-scope="scoped">
              <slot
                :name="item.slotName"
                :row="scoped.row"
                :$index="scoped.$index"
              ></slot>
            </template>
          </el-table-column>
          <!--操作-->
          <el-table-column
            v-if="item.type === 'action'"
            :label="item.label"
            :align="item.align ? item.align : 'center'"
            :width="item.width ? item.width : 260"
            :key="index"
            :header-align="item.headerAlign ? item.headerAlign : 'center'"
            fixed="right"
          >
            <template slot-scope="scoped">
              <template v-if="item.btns && Array.isArray(item.btns)">
                <template v-for="(it, n) in item.btns">
                  <el-button
                    :key="n"
                    :icon="it.icon"
                    type="text"
                    v-if="
                    typeof it.show === 'function'
                      ? it.show(scoped.row)
                      : () => {
                          return true;
                        }
                  "
                    @click="
                    typeof it.click === 'function'
                      ? it.click(scoped.row, tableData)
                      : () => {}
                  "
                  >
                    {{ it.label(scoped.row) }}
                  </el-button>
                </template>
              </template>
              <template v-if="isEdit">
                <el-button
                  type="text"
                  @click="openDrawer('edit', scoped.row)"
                  v-show="profile.editAuthority"
                >编辑</el-button>
              </template>
              <template v-if="isDetails">
                <el-button
                  type="text"
                  @click="openDrawer('details', scoped.row)"
                  v-show="profile.detailsAuthority"
                >查看</el-button>
              </template>
              <template v-if="isOperateLog">
                <el-button
                  type="text"
                  v-show="profile.isOperateLogAuthority"
                  @click="openDrawer('operateLog', scoped.row)"
                >日志</el-button>
              </template>
              <template v-if="isDel">
                <el-button
                  type="text"
                  @click="del(scoped.row, scoped.$index)"
                  style="color: #f46c6b"
                  v-show="profile.delAuthority"
                >删除</el-button>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <!--分页-->
      <div
        class="block"
        align="right"
        v-if="JSON.stringify(pageConfig) != '{}'"
      >
        <div>
          <el-pagination
            v-if="pagePosition === 'left'"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            :layout="page.layout"
            :total="page.total"
          >
          </el-pagination>
          <el-button
            v-for="(item,index) in pageBtnLefts"
            :key="index"
            :type="item.type"
            :icon="item.icon || ''"
            @click="item.click"
          >{{item.label}}</el-button>
        </div>
        <div>
          <el-pagination
            v-if="pagePosition === 'right'"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            :layout="page.layout"
            :total="page.total"
          >
          </el-pagination>
          <el-button
            v-for="(item,index) in pageBtnRights"
            :key="index"
            :type="item.type"
            :icon="item.icon || ''"
            @click="item.click"
          >{{item.label}}</el-button>
        </div>

      </div>
    </div>
    <!--抽屉-->
    <el-drawer
      :title="drawerConfig.drawerTitle"
      :visible.sync="drawerConfig.drawerShow"
      :size="drawerConfig.drawerWidth"
      @close="drawClose"
    >
      <div class="draw-outer">
        <slot
          :name="drawerConfig.drawerSlotName"
          v-if="drawerConfig.drawerShow"
        ></slot>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="drawerConfig.drawerShow = false">取 消</el-button>
          <el-button
            type="primary"
            @click="handleDialogSubmit"
            :loading="drawerConfig.btnLoading"
          >确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import outMethods from "./outMethods";

export default {
  name: "deepSearchTable",
  components: {
    upDownSort: () => import("@/components/upDownSort"),
  },
  props: {
    isBtnPlain: {
      type: Boolean,
      default: true,
    },
    cstyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    tabsList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    multipleSelection: {
      type: Array,
      default: () => [],
    },
    multipleVisible: {
      type: Boolean,
      default: () => true,
    },
    // 列表携带非表单参数
    newParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    tableIndex: {
      type: Boolean,
      default: true,
    },
    // 查询表单配置
    forms: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 表格的设置
    tableConfig: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 按钮组
    btnConfig: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 页面底部按钮组
    pageBtnConfig: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 功能的设置
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 分页的设置
    pageConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 查询接口
    getList: {
      type: Function,
      default: undefined,
    },
    // 权限配置
    authority: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 查询的按钮组
    searchBtns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 判断右边是否能勾选
    selectable: {
      type: Function,
      default: () => {
        return () => {
          console.log("我的世界你看不懂");
        };
      },
    },
    isTabs: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    btnArea() {
      let b = true;
      if (
        this.btnLefts.length === 0 &&
        this.btnRights.length === 0 &&
        !this.isAdd &&
        !this.isDownload &&
        !this.isUpload
      ) {
        b = false;
      } else {
        b = true;
      }
      return b;
    },
  },
  data() {
    return {
      // tabsList: [{
      //
      // }],
      activeName: "0",
      btnLoading: false,
      tableLoading: false,
      dialogBtnLoading: false,
      formInline: {},
      btnLefts: [],
      btnRights: [],
      pageBtnLefts: [],
      pageBtnRights: [],
      isUpload: false,
      isOperateLog: false,
      isEdit: false,
      isDel: false,
      isAdd: false,
      isDownload: false,
      isDetails: false,
      isReset: true,
      operateLogDialog: true,
      detailsDialog: true,
      addDialog: true,
      editDialog: true,
      downloadSize: 1000,
      uploadFile: "/gateway/file-server/file/upload/single",
      headers: { Authorization: `bearer ${getToken()}` },
      uploadUrl: "",
      delUrl: "",
      pagePosition: "right",
      drawerConfig: {
        drawerTitle: "",
        drawerType: "",
        drawerWidth: "70%",
        drawerShow: false,
        drawerSlotName: "details",
        drawerRow: "",
        btnLoading: false,
      },
      profile: {
        addAuthority: true,
        editAuthority: true,
        delAuthority: true,
        detailsAuthority: true,
        isUploadAuthority: true,
        isDownloadAuthority: true,
        isOperateLogAuthority: true,
      },
      page: {
        pageSizes: [10, 20, 50, 100, 200],
        pageSize: 10,
        layout: "sizes, prev, pager, next",
        currentPage: 1,
        total: 0,
      },
      interfacePage: {},
      tableData: [],
      json_data: [],
      json_fields: {},
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 ",
          },
        ],
      ],
      fileName: "",
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...outMethods,
  },
  watch: {
    //
    tableConfig: {
      handler(val) {
        const obj = {};
        if (Array.isArray(val)) {
          const arr = val.filter((ele) => {
            return ele.type != "action";
          });
          arr.forEach((ele) => {
            obj[ele.label] = ele.prop;
          });
          this.json_fields = obj;
        }
      },
      immediate: true,
    },
    // 对分页处理
    pageConfig: {
      handler(val) {
        Object.keys(val).forEach((ele) => {
          if (ele === "currentPage") {
            this.interfacePage[val[ele]] = 1;
          } else if (ele === "pageSize") {
            this.interfacePage[val[ele]] = this.page.pageSize;
          } else if (ele === "total") {
            this.interfacePage[val[ele]] = 0;
          }
        });
      },
      immediate: true,
    },
    // 深度监听forms
    forms: {
      handler(val) {
        if (Array.isArray(val)) {
          val.forEach((ele, index) => {
            if (ele.type === "select") {
              this.doSelect(ele, index);
            }
          });
        }
      },
      immediate: true,
    },
    // 按钮组
    btnConfig: {
      handler(val) {
        const arr = val || [];
        if (arr.length === 0) {
          return;
        }
        const lefts = [];
        const rights = [];
        val.forEach((ele) => {
          if (ele.position == "left") {
            lefts.push(ele);
          } else if (ele.position == "right") {
            rights.push(ele);
          }
        });
        this.btnLefts = lefts;
        this.btnRights = rights;
      },
      immediate: true,
    },
    // 页面底部按钮组
    pageBtnConfig: {
      handler(val) {
        const arr = val || [];
        if (arr.length === 0) {
          return;
        }
        const lefts = [];
        const rights = [];
        val.forEach((ele) => {
          if (ele.position == "left") {
            lefts.push(ele);
          } else if (ele.position == "right") {
            rights.push(ele);
          }
        });
        this.pageBtnLefts = lefts;
        this.pageBtnRights = rights;
      },
      immediate: true,
    },
    // config设置的处理
    config: {
      handler(val) {
        Object.keys(val).forEach((ele) => {
          if (ele === "isUpload") {
            this.isUpload = val[ele];
          } else if (ele === "isDownload") {
            this.isDownload = val[ele];
          } else if (ele === "isOperateLog") {
            this.isOperateLog = val[ele];
          } else if (ele === "isEdit") {
            this.isEdit = val[ele];
          } else if (ele === "isAdd") {
            this.isAdd = val[ele];
          } else if (ele === "isDel") {
            this.isDel = val[ele];
          } else if (ele === "isDetails") {
            this.isDetails = val[ele];
          } else if (ele === "uploadUrl") {
            this.uploadUrl = val[ele];
          } else if (ele === "downloadSize") {
            this.downloadSize = val[ele];
          } else if (ele === "fileName") {
            this.fileName = val[ele];
          } else if (ele === "editDialog") {
            this.editDialog = val[ele];
          } else if (ele === "operateLogDialog") {
            this.operateLogDialog = val[ele];
          } else if (ele === "addDialog") {
            this.addDialog = val[ele];
          } else if (ele === "detailsDialog") {
            this.detailsDialog = val[ele];
          } else if (ele === "delUrl" && typeof val[ele] === "function") {
            this.delUrl = val[ele];
          } else if (ele === "formInline" && val[ele].constructor === Object) {
            this.formInline = Object.assign({}, val[ele]);
          } else if (ele === "drawerWidth") {
            this.drawerConfig.drawerWidth = val[ele];
          } else if (ele === "pagePosition") {
            this.pagePosition = val[ele];
          } else if (ele === "isReset") {
            this.isReset = val[ele];
          }
        });
      },
      immediate: true,
    },
    // 权限控制
    authority: {
      handler(val) {
        Object.keys(val).forEach((ele) => {
          if (ele === "addAuthority") {
            if (typeof val[ele] === "function") {
              this.profile.addAuthority = val[ele]();
            } else if (typeof val[ele] === "boolean") {
              this.profile.addAuthority = val[ele];
            }
          } else if (ele === "editAuthority") {
            if (typeof val[ele] === "function") {
              this.profile.editAuthority = val[ele]();
            } else if (typeof val[ele] === "boolean") {
              this.profile.editAuthority = val[ele];
            }
          } else if (ele === "delAuthority") {
            if (typeof val[ele] === "function") {
              this.profile.delAuthority = val[ele]();
            } else if (typeof val[ele] === "boolean") {
              this.profile.delAuthority = val[ele];
            }
          } else if (ele === "detailsAuthority") {
            if (typeof val[ele] === "function") {
              this.profile.detailsAuthority = val[ele]();
            } else if (typeof val[ele] === "boolean") {
              this.profile.detailsAuthority = val[ele];
            }
          } else if (ele === "isUploadAuthority") {
            if (typeof val[ele] === "function") {
              this.profile.isUploadAuthority = val[ele]();
            } else if (typeof val[ele] === "boolean") {
              this.profile.isUploadAuthority = val[ele];
            }
          } else if (ele === "isDownloadAuthority") {
            if (typeof val[ele] === "function") {
              this.profile.isDownloadAuthority = val[ele]();
            } else if (typeof val[ele] === "boolean") {
              this.profile.isDownloadAuthority = val[ele];
            }
          } else if (ele === "isOperateLogAuthority") {
            if (typeof val[ele] === "function") {
              this.profile.isOperateLogAuthority = val[ele]();
            } else if (typeof val[ele] === "boolean") {
              this.profile.isOperateLogAuthority = val[ele];
            }
          }
        });
      },
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.demo-form-inline {
  padding: 20px 20px 0px 20px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  .el-form-item {
    margin-bottom: 20px;
  }
}
.btns-qj {
  display: flex;
  justify-content: space-between;
}
.block {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.drawer-contianer {
  padding: 10px 20px;
}
/deep/ :focus {
  outline: 0;
}
.upload-demo {
  display: inline-block;
  margin-left: 10px;
}
.upload-btn {
  height: 39px;
}
.downloadBtn {
  display: inline-block;
  margin-left: 10px;
}
.draw-outer {
  position: relative;
  padding: 15px;
  height: 100%;
  .dialog-footer {
    position: absolute;
    width: 100%;
    border-top: 1px solid #dcdfe6;
    height: 40px;
    right: 15px;
    bottom: 15px;
    padding-top: 10px;
  }
}
.dst-container {
  display: flex;
  flex-flow: column;
  background: #eff2f5;
}
.dst-table {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}
</style>
